<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../assets/css/base.css">
    <style>
        .my-btn{
            display: inline-block;
            background-color: cadetblue;
            color: white;
            padding: 6px 12px;
            border-radius: 6px;
            box-shadow: 0 0 2px cadetblue;
            cursor: pointer;
            user-select: none;
            margin: 4px;
        }
        .my-btn:hover{
            background-color: rgb(81, 134, 136);
        }
        .my-btn:active{
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <div id="app">
        <pre v-pre class="note">
        特性1(vue2)：子组件标签绑定事件的处理方式
            + 子组件标签上绑定的所有事件默认都会被拦截；【vue2不需要手动拦截事件】
            + 如果绑定的自定义事件在vue2环境下，需要直接传递给子组件根元素标签进行操作，可以使用 .native 跳过拦截
            + .native 修饰符只有vue2语法存在，vue3已经移除
        </pre>
        <h5>父组件</h5>
        <p>msg:{{ msg }}</p>
        <my-comp @msg=" getMsg " @fun></my-comp>
        <hr>
        <my-btn @click.native="showTip()"></my-btn>
    </div>

    <script type="text/x-template" id="myComp">
        <div class="cbox" itany="网博">
            <h5>子组件1</h5>
            <p>msg:{{ msg }}</p>
            <input type="button" value="发送msg" @click="emitMsgEvent()">
        </div>
    </script>

    <script type="text/x-template" id="btn">
        <div class="my-btn">按钮</div>
    </script>

    <script type="module">
        import Vue from "../../assets/vue2/vue.esm.browser.js";

        const MyComp = {
            template:"#myComp",
            data() {
                return {
                    msg: "子组件变量msg"
                }
            },
            methods: {
                emitMsgEvent() {
                    this.$emit("msg",this.msg)
                }
            },
        }

        const MyBtn = {
            template:"#btn"
        }

        new Vue({
            components: {
                MyComp,MyBtn
            },
            el:"#app",
            data() {
                return {
                    msg:""
                }
            },
            methods: {
                getMsg(e) {
                    this.msg = e;
                },
                showTip(){
                    alert("showTip")
                }
            },
        })
    </script>
</body>
</html>